<template>
	<a-row :gutter="10" :body-style="{ 'padding-bottom': '0px' }" class="mb-2">

		<a-col :span="24">
			<a-card :bordered="false">
				<a-row :gutter="10">
					<a-col :span="24">
						<a-space>
							<a-input-search placeholder="请输入内容" v-model:value="search"
								@search="queryList"></a-input-search>
							<!-- <a-button @click="queryList">刷新</a-button> -->
							<a-button type="primary" @click="add">新增</a-button>
						</a-space>
					</a-col>
				</a-row>
			</a-card>
		</a-col>
	</a-row>
	<a-row :gutter="10">
		<a-col :span="24">
			<a-card :bordered="false">
				<h-table :paged="false" ref="tableRef" :data="loadData" :columns="columns" height="calc(70vh)">
				</h-table>
			</a-card>
		</a-col>
	</a-row>
	<drag-modal v-model:visible="dsDiag.visible" width="400px" :okFlag="!dsDiag.viewFlag" @ok="save"
		@close="dsDiag.visible = false" :closable="false">
		<a-form :model="dsDiag" ref="formRef" autocomplete="off">
			<a-form-item label="数据库编码">
				<a-input v-model:value="dsDiag.datasourceCode" :disabled="dsDiag.id != null"></a-input>
			</a-form-item>
			<a-form-item label="数据库名称">
				<a-input v-model:value="dsDiag.datasourceName"></a-input>
			</a-form-item>
			<a-form-item label="类型">
				<a-select v-model:value="dsDiag.dbTypeCode" @change="change" placeholder="Select" size="normal">
					<a-select-option v-for="item in dbList" :key="item.id" :label="item.name" :value="item.id" />
				</a-select>
			</a-form-item>

			<a-form-item label="驱动">
				<a-select v-model:value="dsDiag.driverClassName" placeholder="Select" size="normal">
					<a-select-option v-for="item in driverClassList" :key="item" :label="item" :value="item" />
				</a-select>
			</a-form-item>
			<a-form-item label="用户名">
				<a-input v-model:value="dsDiag.username"></a-input>
			</a-form-item>
			<a-form-item label="密码">
				<a-input v-model:value="dsDiag.password"></a-input>
			</a-form-item>
			<a-form-item label="IP">
				<a-input v-model:value="dsDiag.ip"></a-input>
			</a-form-item>
			<a-form-item label="端口">
				<a-input v-model:value="dsDiag.port"></a-input>
			</a-form-item>
			<a-form-item label="数据库">
				<a-input v-model:value="dsDiag.db"></a-input>
			</a-form-item>
			<a-form-item label="url">
				<a-input v-model:value="dsDiag.url"></a-input>
			</a-form-item>
		</a-form>
	</drag-modal>
</template>

<script setup name="datasource">
import dataSourceApi from '@/api/datasource/dataSourceApi'
import { useRouter } from "vue-router";
import { message } from 'ant-design-vue';

const search = ref()
const tableRef = ref()


let dsDiag = ref({
	viewFlag: false,
	id: null,
	visible: false,
	ip: '',
	datasourceCode: '',
	datasourceName: '',
	driverClassName: '',
	port: null,
	username: '',
	password: '',
	db: '',
	url: '',
	dbTypeCode: ''
})
let dbList = ref([])
let driverClassList = ref([])


const columns = ref([
	{
		title: '数据库类型',
		dataIndex: 'dbTypeCode',
		key: 'dbTypeCode',
		ellipsis: true,
	},
	{
		title: '名称',
		dataIndex: 'datasourceName',
		key: 'datasourceName',
		ellipsis: true,
	},
	{
		title: '驱动',
		dataIndex: 'driverClassName',
		resizable: true,
		key: 'driverClassName',
		ellipsis: true,
	},
	{
		title: '用户名',
		dataIndex: 'username',
		key: 'username',
		ellipsis: true,
	},
	{
		title: '数据库',
		dataIndex: 'db',
		key: 'db',
		ellipsis: true,
	},
	{
		title: '地址',
		dataIndex: 'url',
		key: 'url',
		ellipsis: true,
	}, {
		title: '启停状态',
		dataIndex: 'disableFlag',
		key: 'disableFlag',
		mapping: [{
			key: '1',
			value: '停用'
		},
		{
			key: '0',
			value: '启用'
		}],
		fixed: 'right'

	}, {
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 400,
		fixed: 'right',
		buttonList: [
			{
				click: (field, record) => {
					handleClick(record)
				},
				render: (record) => {
					return "查看";
				}
			},
			{
				type: 'primary',
				click: (field, record) => {
					edit(record)
				},
				render: (record) => {
					return "编辑";
				}
			},
			{
				click: (field, record) => {
					setStatusFlag(record)
				},
				render: (record) => {
					return record.disableFlag == '0' ? '停用' : '启用';
				}
			},
			{
				click: (field, record) => {
					sqlRunner(record)
				},
				render: (record) => {
					return "sql";
				}
			},
			{

				click: (field, record) => {
					testConnection(record)
				},
				render: (record) => {
					return "测试连接";
				}
			}
		]
	},
]
)

const add = () => {
	dsDiag.value = {};
	dsDiag.value.viewFlag = false;
	dsDiag.value.visible = true
}
// const tableHeight = ref(document.documentElement.clientHeight - 260 + 'px');
onMounted(() => {
	dbTypeList()

	/** 控制table的高度 */
	// window.onresize = function () {
	// 	tableHeight.value = document.documentElement.clientHeight - 260 + 'px'
	// }
})
const handleClick = (r) => {
	dsDiag.value = r
	dsDiag.value.viewFlag = true
	dsDiag.value.visible = true
}

const router = useRouter()

const sqlRunner = (r) => {
	router.push({
		path: '/datasource/sqlRunner',
		query: {
			id: r.id
		}
	})
}
const edit = (r) => {
	dsDiag.value = r
	dsDiag.value.viewFlag = false
	dsDiag.value.visible = true
}

const testConnection = async (r) => {
	const data = await dataSourceApi.testConnection(r)
	// this.$message.error(JSON.stringify(data));
	if (data.indexOf('正确') != -1) {
		message.success(data, 3);
	} else {
		message.error(data, 3);
	}

}

const setStatusFlag = async (row) => {
	await dataSourceApi.setStatusFlag({
		id: row.id,
		disableFlag: row.disableFlag == '1' ? '0' : '1'
	})
	queryList()
}

const change = (r) => {
	var b = null
	dbList.value.forEach((v) => {
		if (v.id == r) {
			b = v
		}
	})
	driverClassList.value = b.driverClass
}


const formRef = ref();

const save = async () => {
	if (dsDiag.value.viewFlag) {
		dsDiag.value.viewFlag = false
		dsDiag.value.visible = false
		return
	}

	await getUrl()

	formRef.value
		.validate()
		.then(async () => {
			await dataSourceApi.save(dsDiag.value)
			dsDiag.value = {}
			queryList()
		})
		.catch(() => {
		})

}

const getUrl = async () => {
	let url = await dataSourceApi.getUrl(dsDiag.value)
	dsDiag.value.url = url
}

const dbTypeList = async () => {
	const data = await dataSourceApi.queryDbTypeList()
	dbList.value = data
}
const loadData = async (parameter) => {
	return await dataSourceApi.queryList(Object.assign(parameter))
}


const queryList = () => {
	tableRef.value.refresh(true)
}


</script>

<style scoped></style>
